import { DefaultStage } from "./stages/default-stage";
import { RawAssetsUrl } from "./raw-assets-info";
import AppUI from './ui/app-ui.vue';
import { IContainerOptions, ThreeContainer } from 'three-lib/base/three-container';
import { WebGLRenderer } from "three";
import { Stage } from "three-lib/base/stage";
import { createApp } from "vue";


export default class AppContainer extends ThreeContainer {

    protected options(): IContainerOptions {
        return {
            showPerformance: true,
            devicePixelRatio: Math.max(Math.min(window.devicePixelRatio, 3), 1),
            engineOptions: {
                preserveDrawingBuffer: true,
            }
        };
    }
    protected loadingUI(): HTMLElement | null {
        return document.getElementById('loading-page');
    }

    protected initializeStages(engine: WebGLRenderer, canvas: HTMLCanvasElement): Array<Stage> {
        const stage = new DefaultStage(engine, canvas);
        return [stage];
    }

    protected renderUI(): void {
        createApp(AppUI).mount(this.ui);
    }



}